<template>
  <div>
    <Modal :mask-closable="false" :title="titleString" v-model="modelShow" width="800">
      <div>
        <Tabs  name="div2" size="small">
          <TabPane label="基础信息" tab="div2">
            <div :style="{ height: divHeight2 }" style="overflow-y: auto; margin-top: 10px">
              <row style="margin-top: 2px">
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv" style="margin-top: 5px">
                    <img
                      src="../../assets/iconFont/头像.png"
                      style="height: 20px; width: 25px; margin-bottom: 5px"
                    />
                    <span
                      class="text1"
                      :title="`看台员工：挡车工-${attrbuteObj.machineName}`"
                      style="font-size: 16px"
                      >看台员工：挡车工-{{ attrbuteObj.empScanDetail }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/累计电量.png"
                      style="height: 20px; width: 25px; margin-bottom: 5px"
                    />
                    <span
                      class="text1"
                      :title="`班次：${attrbuteObj.shiftName}`"
                      style="font-size: 16px"
                      >班次：{{ attrbuteObj.shiftName }}</span
                    >
                  </div>
                </Col>
                <Col span="8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/品种联动.png"
                      style="height: 20px; width: 25px; margin-bottom: 5px"
                    />
                    <span
                      class="text1"
                      :title="`组号：${attrbuteObj.groupNum}`"
                      style="font-size: 16px"
                      >组号：{{ attrbuteObj.groupNum }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <!--                                络筒特有字段-->
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span style="display: inline-block; font-size: 16px">
                      锭号：{{ attrbuteObj.spindleNum }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/平均车速.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`纱支：${attrbuteObj.yarnCount}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      纱支：{{ attrbuteObj.yarnCount }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量查询.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`筒纱重量kg(标准)：${attrbuteObj.singleBarrelsofYarnWeight}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      筒纱重量kg(标准)：{{ attrbuteObj.singleBarrelsofYarnWeight }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/效率 (1).png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`已落筒纱数量：${attrbuteObj.numberofYarnDroppedinDrums}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      已落筒纱数量：{{ attrbuteObj.numberofYarnDroppedinDrums }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <!--                               细纱特有字段 -->
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`筒纱重量kg(生产)：${attrbuteObj.barrelsofYarnWeight}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      筒纱重量kg(生产)：{{ attrbuteObj.barrelsofYarnWeight }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈 (1).png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`平均速度(m/min)：${attrbuteObj.speedAverage}`"
                      style="display: inline-block; font-size: 16px"
                      >平均速度(m/min)：{{ attrbuteObj.speedAverage }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`单锭效率(%)：${attrbuteObj.positionEfcRun}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      单锭效率(%)：{{ attrbuteObj.positionEfcRun }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`单锭停机：${attrbuteObj.actualYarnWeight}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      单锭停机：{{ attrbuteObj.actualYarnWeight }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/平均车速.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`红灯：${attrbuteObj.redLight}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      红灯：{{ attrbuteObj.redLight }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/效率.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`红灯(时间)：${attrbuteObj.redLightTime}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      红灯(时间)：{{ attrbuteObj.redLightTime }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/个数.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`红灯(数量)：${attrbuteObj.redLightNum}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      红灯(数量)：{{ attrbuteObj.redLightNum }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/占比.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`系统报警：${attrbuteObj.systemAlarm}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      系统报警：{{ attrbuteObj.systemAlarm }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <!--                              粗纱特有工序 -->
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`循环：${attrbuteObj.cycle}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      循环：{{ attrbuteObj.cycle }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`系统效率(%)：${attrbuteObj.systemEfcRun}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      系统效率(%)：{{ attrbuteObj.systemEfcRun }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`纺纱报警：${attrbuteObj.spinningAlarm}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      纺纱报警：{{ attrbuteObj.spinningAlarm }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/时间.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`报警(时间)：${attrbuteObj.alarmTime}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      报警(时间)：{{ attrbuteObj.alarmTime }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈 (1).png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`落纱：${attrbuteObj.doffing}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      落纱：{{ attrbuteObj.doffing }}</span
                    >
                  </div>
                </Col>
                <Col flex="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/时间.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`落纱(时间)：${attrbuteObj.doffingTime}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      落纱(时间)：{{ attrbuteObj.doffingTime }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/平均车速.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`管纱更换：${attrbuteObj.replacingTubeYarn}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      管纱更换：{{ attrbuteObj.replacingTubeYarn }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`弹出的管纱数：${attrbuteObj.ejectedTubers}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      弹出的管纱数：{{ attrbuteObj.ejectedTubers }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <!--                                并条特有参数-->
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`筒纱纱尾未找到：${attrbuteObj.drumYarnTailNotFound}`"
                      style="display: inline-block; font-size: 16px"
                      >筒纱纱尾未找到：{{ attrbuteObj.drumYarnTailNotFound }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`管纱纱尾未找到：${attrbuteObj.tubeYarnTailNotFound}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      管纱纱尾未找到：{{ attrbuteObj.tubeYarnTailNotFound }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/平均车速.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`'捻结不成功：${attrbuteObj.twistUnsuccessful}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      '捻结不成功：{{ attrbuteObj.twistUnsuccessful }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/长度.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`筒纱上有双纱：${attrbuteObj.drumYarnHasTwoYarns}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      筒纱上有双纱：{{ attrbuteObj.drumYarnHasTwoYarns }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/长度.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`清纱器：${attrbuteObj.yarnClearer}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      清纱器：{{ attrbuteObj.yarnClearer }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <!--                                清梳联特有参数-->
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`链状疵点：${attrbuteObj.chaindefect}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      链状疵点：{{ attrbuteObj.chaindefect }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`包缠：${attrbuteObj.wrapped}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      包缠：{{ attrbuteObj.wrapped }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/平均车速.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`无刷电机：${attrbuteObj.brushlessMotor}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      无刷电机：{{ attrbuteObj.brushlessMotor }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/平均车速.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`传感器：${attrbuteObj.sensor}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      传感器：{{ attrbuteObj.sensor }}</span
                    >
                  </div>
                </Col>
              </row>
            </div>
          </TabPane>
        </Tabs>
      </div>
      <template v-slot:footer>
        <div> </div>
      </template>
    </Modal>
  </div>
</template>
<script setup>
  // import { postLuoTongBaoBiao } from '@/api/shuJuBaoBiao'
  // import { getBanCiXinXi } from '@/api/gongGongChaXun'
  // import { postJiTaiHuoQuList } from '@/api/shengChanJianShi'
  // import { ref, getCurrentInstance } from 'vue'

  // const { proxy } = getCurrentInstance()
  // const spinShow = ref(false)
  const modelShow = ref(false)
  // const hostCraftParas = ref([])
  // const hostFaultParas = ref([])
  // const hostProduceParas = ref([])
  // const setBaseParas = ref([])
  // const setCraftParas = ref([])
  const attrbuteObj = ref({})
  // const itemValue = ref({})
  const divHeight2 = ref('300px')
  const titleString = ref('')
  // const wuLiaoID = ref('22da14c3-f06f-4dbc-996b-ec67ed0c8293')
  // const time1 = ref('')
  // const time2 = ref('')
  // const xiangXiData = ref()

  // // 显示右侧抽屉
  // const show = (item) => {
  //   modelShow.value = !modelShow.value
  //   itemValue.value = item
  //   titleString.value = item.machineTypeName + '-' + item.machineName
  //   getBanCiXinXi2()
  // }

  // const postJiTaiHuoQuData = () => {
  //   let data = {
  //     machineDocumentIdList: [itemValue.value.id],
  //     craftNodeName: itemValue.value.craftNodeName
  //   }
  //   postJiTaiHuoQuList(data)
  //     .then((res) => {
  //       let rowJson = JSON.parse(res.resultdetails[0].RowJson).VariableGroups
  //       for (let key in rowJson.HostCraftParas) {
  //         hostCraftParas.value.push({
  //           key: key,
  //           value: parseFloat(rowJson.HostCraftParas[key]).toFixed(2)
  //         })
  //       }
  //       for (let key in rowJson.HostFaultParas) {
  //         hostFaultParas.value.push({
  //           key: key,
  //           value: parseFloat(rowJson.HostFaultParas[key]).toFixed(2)
  //         })
  //       }
  //       for (let key in rowJson.HostProduceParas) {
  //         hostProduceParas.value.push({
  //           key: key,
  //           value: parseFloat(rowJson.HostProduceParas[key]).toFixed(2)
  //         })
  //       }
  //       for (let key in rowJson.SetBaseParas) {
  //         setBaseParas.value.push({
  //           key: key,
  //           value: parseFloat(rowJson.SetBaseParas[key]).toFixed(2)
  //         })
  //       }
  //       for (let key in rowJson.SetCraftParas) {
  //         setCraftParas.value.push({
  //           key: key,
  //           value: parseFloat(rowJson.SetCraftParas[key]).toFixed(2)
  //         })
  //       }
  //     })
  //     .catch(() => {
  //       // spinShow.value = false
  //     })
  // }
  // // 获取上一班次信息
  // const getBanCiXinXi2 = () => {
  //   let data = {
  //     CraftNodeID: wuLiaoID.value,
  //     dateTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
  //   }
  //   getBanCiXinXi(data).then((res) => {
  //     let resJson = res
  //     time1.value = resJson.tsId
  //     time2.value = resJson.tsId
  //     //  banCi = resJson.shiftNum
  //     postLuoTongBaoBiaoData()
  //   })
  // }

  // const postLuoTongBaoBiaoData = () => {
  //   let data = {
  //     TsIdStart: time1.value,
  //     TsIdEnd: time2.value,
  //     CraftNodeId: wuLiaoID.value,
  //     MachineDocumentIds: [itemValue.value.id]
  //   }
  //   postLuoTongBaoBiao(data)
  //     .then((res) => {
  //       //  huiZhongData = res.ltThirdGroupdata
  //       xiangXiData.value = res.ltThirdDetaildatas

  //       xiangXiData.value.forEach((value) => {
  //         value.tsid =
  //           '20' +
  //           value.tsid.toString().substring(0, 2) +
  //           '-' +
  //           value.tsid.toString().substr(2, 2) +
  //           '-' +
  //           value.tsid.toString().substr(4, 2)
  //       })
  //       attrbuteObj.value = xiangXiData.value[0]
  //     })
  //     .catch(() => {})
  // }
</script>
<style lang="scss">
  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
  .text1 {
    display: inline-block;
    cursor: default;
    width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
